<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Danh sách role</ui:define>
    <ui:define name="content">
        <style type="text/css">
            .colStyle1 {
                vertical-align: top;
                width: 20%;
            }
            .colStyle2 {
                vertical-align: top;
            }
        </style>
        <h:form id="mainForm">
            <h:panelGrid columns="2" cellpadding="5" width="100%" columnClasses="colStyle1, colStyle2">
                <ui:include src="/templates/menu.xhtml"/>
                
                <p:panel header="Danh sách role">
                    <p:messages id="msgs"/>
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">  
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Xem" action="#{roleBean.preViewAction()}" update="mainForm:viewMsgs" oncomplete="handleViewRequest(xhr, status, args)"/>
                            <p:commandButton value="Sửa" action="#{roleBean.preEditAction()}" update="mainForm:editMsgs" oncomplete="handleEditRequest(xhr, status, args)"/>
                            <p:commandButton value="Xóa" actionListener="#{roleBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <p:dataTable var="role" value="#{roleBean.roleList}" paginator="true" rows="10"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="10,20,30" rowKey="#{role.id}"
                                 selection="#{roleBean.selectedRoles}">
                        <f:facet name="header">Danh sách role</f:facet>
                        <p:column selectionMode="multiple" />
                        <p:column headerText="Tên role">
                            <h:outputText value="#{role.name}"/>  
                        </p:column>
                        <p:column headerText="Mã role">
                            <h:outputText value="#{role.code}"/>  
                        </p:column>
                        <p:column headerText="Mô tả">
                            <h:outputText value="#{role.description}"/>
                        </p:column>
                    </p:dataTable>
                    
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">  
                            <p:button value="Tạo mới" outcome="new"/>
                            <p:commandButton value="Xem" action="#{roleBean.preViewAction()}" update="mainForm:viewMsgs" oncomplete="handleViewRequest(xhr, status, args)"/>
                            <p:commandButton value="Sửa" action="#{roleBean.preEditAction()}" update="mainForm:editMsgs" oncomplete="handleEditRequest(xhr, status, args)"/>
                            <p:commandButton value="Xóa" actionListener="#{roleBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />
                            </p:menuButton>  
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <p:dialog header="Thông báo" widgetVar="viewDialog" width="250" showEffect="explode" hideEffect="explode">
                        <p:dataList id="viewMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>
                    
                    <p:dialog header="Thông báo" widgetVar="editDialog" width="250" showEffect="explode" hideEffect="explode">  
                        <p:dataList id="editMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>
                    
                    <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                        <p:dataList id="deleteMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                            <h:outputText value="#{msg.summary}"/>
                        </p:dataList>
                    </p:dialog>
                    
                    <p:confirmDialog message="Bạn có muốn xóa role?" appendToBody="true"
                                     header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                        <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="mainForm"
                                         actionListener="#{roleBean.deleteAction()}" />  
                        <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                    </p:confirmDialog>
                    
                    <script type="text/javascript">
                        function handleViewRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                viewDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } 
                        } 
                        function handleEditRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                editDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } 
                        }
                        function handleDeleteRequest(xhr, status, args) {
                            if(args.validationFailed || args.invalid) {
                                deleteDialog.show();
                                jQuery('#dialog').effect("shake", { times:3 }, 100);  
                            } else {
                                deleteConfirm.show();
                            }
                        }  
                    </script>
                </p:panel>
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>
